<template>
  <!--个人信息卡片 -->
  <el-card style="max-width: 95%;margin-top: 20px;margin-left: 30px;height: 585px">
    <el-descriptions
        class="margin-top"
        title="个人信息"
        :column="3"
        size='large'
        border
    >
      <template #extra>
        <el-button type="primary" @click="showUpdateDialog" size="default" icon="Edit">更改信息</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user/>
            </el-icon>
            姓名
          </div>
        </template>
        {{ hospitalPatient.patientName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone/>
            </el-icon>
            联系电话
          </div>
        </template>
        {{ hospitalPatient.patientPhone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Moon/>
            </el-icon>
            性别
          </div>
        </template>
        <span v-if="hospitalPatient.patientSex == 1">男</span>
        <span v-else>女</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <CreditCard/>
            </el-icon>
            身份证
          </div>
        </template>
        {{ hospitalPatient.patientIdnum }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            医保号码
          </div>
        </template>
        {{ hospitalPatient.medicalInum }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Location/>
            </el-icon>
            住址
          </div>
        </template>
        {{ hospitalPatient.patientAddress }}
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
  <!--  更改资料弹出层-->
  <el-dialog v-model="dialogFormVisible" title="个人信息更改" width="500">
    <el-form :model="patient" label-width="80px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="patient.patientName" placeholder="请输入姓名" size="large" disabled/>
      </el-form-item>
      <el-form-item label="登录账号" prop="username">
        <el-input v-model="patient.patientUsername" placeholder="请输入登录账号" size="large"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="patient.patientPassword" placeholder="请输入密码" size="large"/>
      </el-form-item>
      <el-form-item label="性别" prop="patientSex">
        <el-radio-group v-model="patient.patientSex" disabled>
          <el-radio value="1" size="large">男</el-radio>
          <el-radio value="2" size="large">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="身份证" prop="patientIdnum" required>
        <el-input v-model="patient.patientIdnum" placeholder="请输入身份证" size="large" disabled/>
      </el-form-item>
      <el-form-item label="医保号" prop="medicalInum" required>
        <el-input v-model="patient.medicalInum" placeholder="请输入医保号码" size="large" disabled/>
      </el-form-item>
      <el-form-item label="电话" prop="patientPhone" required>
        <el-input v-model="patient.patientPhone" placeholder="请输入电话号码" size="large"/>
      </el-form-item>
      <el-form-item label="住址" prop="patientAddress" required>
        <el-input v-model="patient.patientAddress" placeholder="请输入住址" size="large"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="updatePatient">
          更改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import jsCookie from "jscookie";
import {fetchUser, renewPatient} from "@/api/pat.js";
import {CreditCard, Iphone, Location, Moon, OfficeBuilding, Tickets, User} from "@element-plus/icons-vue";
import {ElMessage, ElNotification} from "element-plus";

export default {
  name: "userCenter",
  components: {Moon, CreditCard, OfficeBuilding, Tickets, Location, Iphone, User},
  data() {
    return {
      hospitalPatient: {},
      token: '',
      dialogFormVisible: false,
      patient: {},

    }
  },
  created() {
    this.token = jsCookie.get('token');
    this.fetchPatient()
  },
  methods: {
    async updatePatient() {
      try {
        const response = await renewPatient(this.patient);
        if (response.data.code == 200) {
          ElNotification({
            title: '成功！',
            message: "更改成功",
            type: 'success',
          });
          this.dialogFormVisible = false;
          this.fetchPatient();
        } else {
          ElNotification({
            title: '失败！',
            message: response.data.msg,
            type: 'warning',
          });
        }
      } catch (e) {
        ElMessage({
          message: '请输入全部信息后重试！',
          type: 'error',
        });
      }
    },
    showUpdateDialog() {
      this.patient = {};
      this.patient.patientId = this.hospitalPatient.patientId;
      this.patient.patientName = this.hospitalPatient.patientName;
      this.patient.patientUsername = this.hospitalPatient.patientUsername;
      this.patient.patientSex = this.hospitalPatient.patientSex.toString();
      this.patient.patientIdnum = this.hospitalPatient.patientIdnum;
      this.patient.medicalInum= this.hospitalPatient.medicalInum;
      this.patient.patientPhone = this.hospitalPatient.patientPhone;
      this.patient.patientAddress = this.hospitalPatient.patientAddress;
      this.dialogFormVisible = true;
    },
    async fetchPatient() {
      const response = await fetchUser(this.token);
      this.hospitalPatient = response.data.data;
    }
  }
}
</script>

<style scoped>

</style>
